<template>
	<m-layout :className="[`home${wards}`,'home']" barBg="unset" gap="0 24" :title="wardsName">
		<m-block slot="header" bgColor="unset">
			<uni-search-bar radius="10" @confirm="reset" v-model="key" placeholder="请输入搜索内容" :cancelButton='false'
				@clear="clear">
			</uni-search-bar>
		</m-block>
		<m-sticky>
			<template v-if="wards == 2">
				<m-image src="http://117.24.6.18:5003/static/tzimg/homebanner3-2.png" mode="widthFix" wh="710 auto"></m-image>
			</template>
			<template v-if="wards == 3">
				<m-image src="http://117.24.6.18:5003/static/tzimg/homebanner4-1.png" mode="widthFix" wh="750 290"></m-image>
			</template>

			<m-block bgColor="unset">
				<view class="flex">
					<m-text :bold="sortPrice == 0" ftsize="28" :color="sortPrice == 0?'#333':'#999999'"
						@click="sortPrice = 0" spa="0 30 0 0">综合排序</m-text>
					<view @click="sortPrice = sortPrice == 1 ? 2 : 1">
						<m-text :bold="[1, 2].indexOf(sortPrice) != -1"
							:color=" [1, 2].indexOf(sortPrice) != -1? '#333':'#999999'">价格</m-text>
						<template v-if="[1, 2].indexOf(sortPrice) == -1">
							<m-icon spa="0 0 0 10" wh="28 22" type="sort10" />
						</template>
						<template v-else>
							<m-icon spa="0 0 0 10" wh="28 22" :type="sortPrice == 1 ? 'sort11' : 'sort12'" />
						</template>
					</view>
					<m-text :bold="sortPrice == 5" spa="0  0 0 30" @click="sortPrice = 5"
						:color="sortPrice == 5?'#333':'#999999'">销量</m-text>
				</view>
			</m-block>
		</m-sticky>
		
		
		<hot-sale gap="30 0 0"  :sortPrice="sortPrice" ref="hot" :wards="wards"  :searckey="key"  ></hot-sale>
			
			
		<!-- 	
		<view class="list-box ">
			<template v-for="(item,idx) in listArr">
				<goodsCard :key="item.id" class="li" :item="item"></goodsCard>
			</template>
		</view>
		<m-loading :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" /> -->
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import { GetGoodsPage } from '@/api/Goods.js';
	export default {
		data() {
			return {
				key: '',
				wards: '',
				tabIdx: 0,
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
				sortPrice: 0,
			};
		},
		watch: {
			tabIdx() {
				this.reset()
			},
			sortPrice() {
				this.reset();
			},
		},
		computed: {
			...mapState({
				userbalance: state => state.user.userbalance,
				enum: state => state.general.enum,
			}),
			wardsEnum() {
				return this.enum['Wards']
			},
			wardsName() {
				return this.wardsEnum[this.wards]
			}
		},
		onLoad({ wards }) {
			this.wards = wards
			this.init()
		},
		methods: {
			async clear() {
				this.key = '';
				await this.sleep(100)
				this.reset();
			},
			reset() {
				this.$nextTick(() => {
					this.$refs.hot.onReset();
				})
			},
			async init() {
				this.$nextTick(() => {
					this.$refs.hot.getData();
				})
			},
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.home0 {
		background: url('http://117.24.6.18:5003/static/tzimg/homebanner1.png') #f6f6f6 no-repeat;
		background-size: 750rpx 627rpx;
	}

	.home3 {
		background: url('http://117.24.6.18:5003/static/tzimg/homebanner3-3.png') #f6f6f6 no-repeat;
		background-size: 750rpx 1043rpx;
	}

	.home2 {
		background: url('http://117.24.6.18:5003/static/tzimg/homebanner4-2.png') #DDFEC8 no-repeat;
		background-size: 750rpx 627rpx;
	}

	.home {
		transition: all 0.5s;
		min-height: 100vh;
		/* #ifndef MP-WEIXIN */
		background-position: left -40rpx;
		/* #endif */
	}

	.uni-searchbar {
		padding-top: 0rpx !important;
		padding: 0 24rpx !important;
	}

	.list-box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
		margin-top: 30rpx;
		.li{
			flex: 1;
			box-sizing: border-box;
			overflow: hidden;
		}
	}
</style>